<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- da弹性布局: 主要是安排页面上的元素的位置(排列方式)
  前面介绍的属性,大部分都是针对这个元素本身来设置的
  但是这里还有些元素,是影响到元素和元素之间的
  其中盒子模型(外边距) 就是一部分,但是还是不够的

  弹性布局,就是进一步强化这一点
  默认的网页布局,就是从上到下(块级元素独占一行)
  实际的网页,不仅仅需要从上到下,也需要从左到右 -->

  <style>
    .parent {
      /* width:100% ---> 让当前元素的宽度和它父元素(body)一样宽 */
      width: 100%;
      height: 200px;
      background-color: grey;

      /* 弹性布局 --水平布局 */
      display: flex;

      /* 
       水平方向的排列方式:justify-content
       start 靠左排列
       end 靠右排列
       center 居中排列
       space-between 让元素中间有些等分的间隔--(浏览器自动计算的)
       space-around 让元素中间有些等分的间隔, 最左边和最右边也有间隔
       
      */
      justify-content: start;

      /* 垂直方向的排列: align-items
      
      */
      align-items: center;
    }

    .one,
    .two,
    .three {
      width: 100px;
      height: 100px;
      background-color: red;

    }
  </style>

  <div class="parent">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>



</body>

</html>